<template>
  <div class="v-editor-diagramMatrix-rowElementType g-jc-sb">
    <div class="g-flex-1 _list_scroll">
      <div
        v-for="(item, index) of valueList"
        :key="index"
        :class="{ _selected: selected && selectedModelId === item.id }"
        class="g-pd-l-8 g-one-line"
        @click="handleClickItem(item)"
        @contextmenu="propertyModelContextMenu($event, item)"
      >
        <span>
          <img
            style="margin-right: 4px; height: 16px"
            :src="item.icon"
          />
          <span v-if="item.name">
            {{ item.name }}
            <span
              v-if="item.showAttribute?.extraAttribute?.metaclassNames?.length"
              class="metaclassName"
            >
              {{ "[" + item.showAttribute?.extraAttribute?.metaclassNames[0] + "]" }}
            </span>
            <span v-if="qualifiedNames[index]">{{ `[${qualifiedNames[index]}]` }}</span>
          </span>
        </span>
      </div>
    </div>

    <div
      v-if="selected && !row.readonly && !isModelDisabled"
      style="border-left: 1px solid #ddd; line-height: 14px"
      class="g-pd-4 g-flex-0"
    >
      <div>
        <img
          src="statics/icons/app/iconadd.png"
          class="g-pointer"
          @click="handleAdd"
        />
      </div>
      <div class="g-m-t-4">
        <img
          src="statics/icons/app/iconreduce.png"
          class="g-pointer"
          @click="handleRemove"
        />
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { actionManager } from "@/action/ActionManager";
import { CreatePropertyModelTreeSelect } from "@/modules/model/actions/project/CreatePropertyModelTreeSelect";
import { PropertyRow, ModelValue } from "../../types";
import { ref, Ref, computed, watch, inject } from "vue";
import { ActionKey } from "@/action/ActionKey";
import { propertyUtil } from "../../PropertyUtil";
import { propertyModelContextMenu } from "../propertyUtil";
import { modelService } from "@/modules/model/service";

const isModelDisabled = inject("isModelDisabled") as Ref<boolean>;

/**
 * 显示关系选择
 */
const props = defineProps<{
  row: PropertyRow;
  selected?: boolean;
}>();

const selectedModelId = ref("");

const valueList = computed(() => {
  return (props.row.value || []) as ModelValue[];
});

const qualifiedNames = ref<string[]>([]);
// watch(
//   () => props.row.value,
//   async () => {
//     const models = (props.row.value || []) as ModelValue[];
//     if (models.length > 0) {
//       for (let index = 0; index < models.length; index++) {
//         const element = models[index];
//         const path: ModelData[] = await modelService.getNodePath(app.activeProject?.id as string, element.id);
//         qualifiedNames.value[index] = path.map(item => item.name).join('::');
//       }
//     }
//   },
//   { immediate: true }
// );

watch(
  () => props.row.value,
  async () => {
    const models = (props.row.value || []) as ModelValue[];
    if (models.length > 0) {
      const modelIds = models.map(item => item.id);
      const modelDataMap = await modelService.getNodePathMutiple(app.activeProject?.id as string, modelIds);
      const modelDatas = Array.from(modelDataMap.values());
      for (let index = 0; index < modelDatas.length; index++) {
        const element = modelDatas[index];
        qualifiedNames.value[index] = element.map(item => item.name).join("::");
      }
    }
  },
  { immediate: true }
);

watch(
  () => props.selected,
  val => {
    if (val === false) {
      selectedModelId.value = "";
    }
  }
);

const handleAdd = () => {
  const action = actionManager.getAction(ActionKey.CreatePropertyModelTreeSelect) as CreatePropertyModelTreeSelect;
  action?.run(props.row);
};
function handleRemove() {
  propertyUtil.removePropertyAndRefresh(props.row, selectedModelId.value);
}
function handleClickItem(item: ModelValue) {
  selectedModelId.value = item.id;
}
</script>
<style lang="scss">
@import "@/assets/css/theme.scss";
.v-editor-diagramMatrix-rowElementType {
  // height: 100%;
  ._selected {
    color: $theme-color;
  }
  ._list_scroll {
    overflow-y: auto;
    &::-webkit-scrollbar {
      width: 8px;
      height: 8px;
    }
    .metaclassName {
      margin: 0 3px;
    }
  }
}
</style>
